<template>
  <div>
    <NavSearch :searchData="searchData"></NavSearch>
    <div class="table-top">
      <el-table :data="tableList"
                row-key="id"
                :tree-props="{children: 'children'}"
                :height="tableHeight">
        <el-table-column min-width="3%">
        </el-table-column>
        <el-table-column label="商品编号"
                         min-width="15%">
          <template slot-scope="scope">
            <div class="content-left"
                 :class="scope.row.align ? 'childs' : ''">
              <img src="../../../../static/images/100.jpg">
              <div class="content-right">
                <div class="content-right-top">{{scope.row.name.content}}</div>
                <div>{{scope.row.name.num}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="specifications"
                         label="多规格"
                         min-width="9%"></el-table-column>
        <el-table-column prop="company"
                         label="单位"
                         min-width="9%"></el-table-column>
        <el-table-column prop="cost"
                         min-width="9%">
          <template slot="header">
            <div class="tab-title">
              <p>库存成本价</p>
              <el-tooltip class="item"
                          effect="light"
                          placement="bottom">
                <div slot="content">如商品在多个仓库价格不<br />同时，取商品在多个仓库<br />库存成本价的加权平均值</div>
                <span class="iconfont icon-test224"></span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="purchase"
                         label="参考进价"
                         min-width="9%"></el-table-column>
        <el-table-column prop="purchases"
                         label="最近一次采购价"
                         min-width="9%"></el-table-column>
        <el-table-column prop="sale"
                         label="销售价"
                         min-width="9%"></el-table-column>
        <el-table-column prop="retail"
                         label="零售价"
                         min-width="9%"></el-table-column>
        <el-table-column prop="grade"
                         min-width="9%">
          <template slot="header">
            <div class="tab-title">
              <p>等级价</p>
              <el-tooltip class="item"
                          effect="light"
                          placement="bottom">
                <div slot="content"
                     style="text-align:center">分別设置不同等级客户的<br />订货价</div>
                <span class="iconfont icon-test224"></span>
              </el-tooltip>
            </div>
          </template></el-table-column>
        <el-table-column prop="appoint"
                         min-width="9%">
          <template slot="header">
            <div class="tab-title">
              <p>指定价</p>
              <el-tooltip class="item"
                          effect="light"
                          placement="bottom">
                <div slot="content"
                     style="text-align:center">一客一价，分别设置每个<br />客户的订货价</div>
                <span class="iconfont icon-test224"></span>
              </el-tooltip>
            </div>
          </template></el-table-column>
      </el-table>
    </div>
    <Paging :msg="50"
            @pageNum='getPageNum'
            @pageId='getPageId'></Paging>
  </div>
</template>

<script>
import NavSearch from '@/components/common/navSearch/NavSearch'
import Paging from '@/components/common/paging/Paging'
export default {
  data () {
    return {
      pageNum: 15, // 每页默认显示15条,
      pageId: 1, // 页面id,第几页
      parentMsg: [],
      searchData: [
        {
          numberingBox: true
        },
        [
          {
            placeholder: '商品分类',
            classificationList: [
              {
                name: '饮料',
                children: [{
                  name: '毛衣',
                  children: [{
                    name: '衣服',
                    children: []
                  }]
                }]
              },
              {
                name: '卫衣',
                children: []
              },
              {
                name: '连衣裙',
                children: []
              },
              {
                name: '打底衫',
                children: []
              },
              {
                name: '短袖T恤',
                children: []
              },
              {
                name: '袜子',
                children: [{
                  name: '打底袜',
                  children: []
                },
                {
                  name: '隐形袜',
                  children: []
                },
                {
                  name: '运动袜',
                  children: []
                },
                {
                  name: '儿童袜',
                  children: []
                },
                {
                  name: '堆堆袜',
                  children: []
                },
                {
                  name: '商务袜',
                  children: []
                }]
              },
              {
                name: '下装',
                children: [
                  {
                    name: '短裤',
                    children: []
                  },
                  {
                    name: '铅笔裤',
                    children: []
                  },
                  {
                    name: '打底裤',
                    children: []
                  },
                  {
                    name: '牛仔裤',
                    children: []
                  },
                  {
                    name: '半身裙',
                    children: []
                  },
                  {
                    name: '短裙',
                    children: []
                  }]
              },
              {
                name: '上装',
                children: [
                  {
                    name: '针织衫',
                    children: []
                  },
                  {
                    name: '衬衫',
                    children: []
                  }
                ]
              },
              {
                name: '箱包',
                children: [
                  {
                    name: '鞋子',
                    children: [
                      {
                        name: '其他',
                        children: []
                      },
                      {
                        name: '凉鞋',
                        children: []
                      },
                      {
                        name: '粗跟',
                        children: []
                      },
                      {
                        name: '中跟',
                        children: []
                      },
                      {
                        name: '细跟',
                        children: []
                      },
                      {
                        name: '厚底松糕鞋',
                        children: []
                      }
                    ]
                  },
                  {
                    name: '双肩包',
                    children: []
                  },
                  {
                    name: '水桶包',
                    children: []
                  },
                  {
                    name: '手提包',
                    children: []
                  },
                  {
                    name: '拉杆箱',
                    children: []
                  },
                  {
                    name: '小方包',
                    children: []
                  }
                ]
              },
              {
                name: '未分类',
                children: []
              }
            ],
            labelList: []
          },
          {
            placeholder: '商品标签',
            classificationList: [],
            labelList: ['新品', '推荐', '热销', '特价', '爆款']
          },
          {
            placeholder: '价格预警',
            classificationList: [],
            labelList: ['低于最近采购价', '毛利低于10%', '毛利低于20%', '毛利低于30%', '毛利低于50%']
          },
          {
            placeholder: '价格设置',
            classificationList: [],
            labelList: ['已设置等级价', '未设置等级价', '已设置指定价', '未设置指定价']
          }
        ],
        {
          gaojiseach: false,
          daochu: false,
          daoru: false,
          add: false
        }
      ],
      tableList: [
        {
          id: 1,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 11,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 12,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        },
        {
          id: 2,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 21,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 22,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        },
        {
          id: 3,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 31,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 32,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        },
        {
          id: 4,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 41,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 42,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        },
        {
          id: 5,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 51,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 52,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        },
        {
          id: 6,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 61,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 62,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        },
        {
          id: 7,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 71,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 72,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        },
        {
          id: 8,
          name: {
            img: '',
            content: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          specifications: '3种',
          company: '件',
          cost: '',
          purchase: '',
          purchases: '',
          sale: '130.00',
          retail: '120.00',
          grade: '',
          appoint: '',
          align: false,
          children: [
            {
              id: 81,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            },
            {
              id: 82,
              name: {
                img: '',
                content: '颜色：黑色条纹；尺寸：S',
                num: 2019022100026
              },
              company: '件',
              cost: '无',
              purchase: '无',
              purchases: '无',
              sale: '130.00',
              retail: '120.00',
              grade: '未设置',
              appoint: '未设置',
              align: true
            }
          ]
        }
      ],
      tableHeight: window.innerHeight - 275
    }
  },
  methods: {
    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    },
    childrenColor () {
      var childs = document.getElementsByClassName('childs')
      var count = document.getElementsByClassName('childs').length
      for (var i = 0; i < count; i++) {
        childs[i].parentElement.parentElement.parentElement.style.backgroundColor = '#fcfcfc'
      }
    }
  },
  components: {
    NavSearch, Paging
  },
  created () {
    setTimeout(() => {
      this.childrenColor()
    }, 200)
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 275
        that.tableHeight = window.tableHeight
      })()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table tbody tr:hover > td {
  background-color: transparent !important;
}

.table-top {
  /deep/ thead {
    font-size: 12px;
    tr {
      th {
        border: {
          top: 1px #e3e3e3 solid;
          bottom: 1px #e3e3e3 solid;
        }
        background-color: #fcfcfc;
        padding: 2px 0;
        text-align: center;
        font-weight: 400;
      }
    }
  }
  /deep/ tbody {
    tr {
      td {
        text-align: center;
        padding: 10px 0;
        .cell {
          text-overflow: unset;
        }
        .content-left {
          display: flex;
          align-items: center;
          font-size: 12px;
          img {
            width: 48px !important;
            height: 48px !important;
            margin-right: 15px;
          }
          .content-right {
            text-align: left;
            line-height: 20px;
          }
          .content-right-top {
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 5px;
          }
        }
        .childs {
          margin-left: 15%;
        }
      }
    }
  }
}
.tab-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  .icon-test224:before {
    font-size: 18px;
    display: flex;
    align-items: center;
  }
}
</style>
